<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo16-渲染函数-组件子节点</title>
    <!-- 
      很多地方不理解！！！
      隐约摸索到一些线索：render函数使用原生js的能力去创建dom 。
      所以在render函数中不能使用类似 "父组件"中引入"子组件"的编码方式 。。。具体细节还没有研究透

     -->
</head>
<script src="../libs/vue.js"></script>
<style>
    .container{
        width: 100%;
        min-width: 320px;
        max-width: 640px;

        margin:0 auto;
    }
</style>
<body> 
    <div id="app">
      <my-heading>
        <span>这里该有sec title</span>
        <!-- <my-sec-title></my-sec-title> -->
      </my-heading>
    </div>
</body>

<script>


Vue.component('my-sec-title', {
  render: function (createElement) {
    return createElement(
      'h3' ,
      {
        slot:'default'
      }
    )
  },
  data:function(){
    return {
      secTitle:'这是二级标题'
    }
  }
});

/**
 * 这样代码精简很多，但是需要非常熟悉 Vue 的实例 property。在这个例子中，你需要知道，向组件中传递不带 v-slot 指令的子节点时，比如 anchored-heading 中的 Hello world!，这些子节点被存储在组件实例中的 $slots.default 中。如果你还不了解，在深入渲染函数之前推荐阅读实例 property API。
 * 
 * 不懂。。。
 *  
 */ 
Vue.component('my-heading', {
  render: function (createElement) {
      // console.log(this.$slots);
      var nextElment = this.$slots.default;
      console.log(nextElment);

      var roNode = this.rootNode;
    return createElement(
      roNode ,
      {
        style: {
          color: 'red',
          fontSize: '24px'
        }
      },
      [
        this.blogTitle,
        nextElment.map(el=>{
          return createElement(el.tag,el);
        })
      ]
    )
  },
  data:function(){
    return {
      rootNode : 'h1',
      blogTitle:'主 title'
    }
  }
});




var app = new Vue({
  el: '#app'
});
</script>
</html>